<!--用户详情 -->
<template>
  <div class="detail-index-content">
    <Modal
      v-model="modalValue"
      :title="titleName"
      footer-hide
      width="920"
      @on-cancel="cancel"
    >
      <div class="user-main">
        <Form ref="FormRef" :model="formData" :rules="ruleFormData">
          <Row :gutter="30">
            <Col span="12">
              <FormItem label="用户名" prop="realName">
                <Input
                  v-model="formData.realName"
                  placeholder="请输入用户名称"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="手机号" prop="mobile">
                <Input
                  v-model="formData.mobile"
                  placeholder="请输入手机号"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="用户角色" prop="permissionRoleId">
                <Select
                  v-model="formData.permissionRoleId"
                  placeholder="请选择账号状态"
                >
                  <Option
                    :value="item.permissionRoleId"
                    v-for="item in roleList"
                    :key="item.permissionRoleId"
                    >{{ item.roleName }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="状态">
                <Select
                  v-model="formData.accountStatus"
                  placeholder="请选择账号状态"
                >
                  <Option
                    :value="item.id"
                    v-for="item in statusList"
                    :key="item.id"
                    >{{ item.name }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="默认密码">
                <Input v-model="formData.pwd" placeholder="请输入密码"></Input>
              </FormItem>
            </Col>
            <Col span="24">
              <Button
                type="primary"
                :loading="isLoading"
                @click="handleSubmit('FormRef')"
                >确认</Button
              >
            </Col>
          </Row>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import {
  addUserAndJoinOrg, // 创建公司
  getUserRoleList, // 获取角色列表
  updateCompany, // 修改公司
} from "@/api/system.js";

export default {
  name: "addUpdateCompany",
  components: {},
  props: {
    echoData: {
      type: Object,
      default: () => {},
    },
    isHide: {
      type: Boolean,
      default: false,
    },
    titleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        mobile: "",
        realName: "",
        permissionRoleId: "",
        accountStatus: "",
        pwd: "",
        companyDepartmentId: this.$props.echoData.companyDepartmentId,
      },
      ruleFormData: {
        realName: [
          { required: true, message: "请输入用户姓名", trigger: "change" },
        ],
        mobile: [
          { required: true, message: "请输入用户手机号", trigger: "change" },
        ],
        permissionRoleId: [
          { required: true, message: "请选择用户角色", trigger: "change" },
        ],
      },
      modalValue: false,
      isLoading: false,
      statusList: [
        {
          id: "Normal",
          name: "正常",
        },
        {
          id: "Freeze",
          name: "冻结",
        },
      ],
      roleList:[]
    };
  },
  methods: {
    cancel() {
      this.$emit("update:updateIsHide", false);
    },
    async addUserAndJoinOrgAction() {
      try {
        this.isLoading = true;
        let data = await addUserAndJoinOrg(this.formData);
        this.isLoading = false;
        this.$Message.success("添加成功！");
        this.$emit("actionSuccess");
        this.$emit("update:updateIsHide", false);
      } catch (error) {
        this.isLoading = false;
      }
    },
    async updateCompanyAction() {
      this.isLoading = true;
      try {
        let data = await updateCompany(this.formData);
        this.isLoading = false;
        this.$Message.success("编辑成功！");
        this.$emit("update:updateIsHide", false);
        this.$emit("actionSuccess");
      } catch (error) {
        this.isLoading = false;
      }
    },
    async getUserRoleListData() {
      let data = await getUserRoleList();
      this.roleList = data
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        console.log(valid, "name", this.$props.echoData);
        if (valid) {
          if (this.$props.titleName == "编辑") {
            this.formData.parentId = this.$props.echoData.id;
            this.formData.companyName = this.$props.echoData.title;
            return this.updateCompanyAction();
          }
          this.addUserAndJoinOrgAction();
        }
      });
    },
  },
  created() {
    this.formData.parentId = this.$props.echoData.parentId;
    this.formData.ownType = this.$props.echoData.ownType;
    this.modalValue = this.$props.isHide;
    this.getUserRoleListData();
  },
};
</script>

<style lang="less" scoped>
.ivu-radio-group {
  width: 100%;
}
.head-img {
  display: flex;
  justify-content: center;
  img {
    width: 80px;
    height: 80px;
  }
}
.real-name {
  text-align: center;
  font-size: 14px;
  margin: 20px 0 30px 0;
}
.user-info-main {
  display: flex;
  .info-left {
    margin-right: 10px;
  }
  .info-right {
    line-height: 1;
    padding-top: 8px;
    h4 {
      font-size: 16px;
      font-weight: normal;
    }
    p {
      font-size: 24px;
      margin-top: 10px;
    }
  }
}
.user-main {
  padding: 20px;
}
</style>
